<template>
  <div>
    <el-dialog width="80%" :visible.sync="dialogVisible" @close="onClose" :title="title">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="250px"
               label-position="left">
        <el-form-item  label="奖品名称" prop="lotteryName">
          <el-input v-model="formData.lotteryName" placeholder="请输入奖品名称"></el-input>
        </el-form-item>
        <el-form-item  label="类型" prop="lotteryType">
          <el-radio-group v-model="formData.lotteryType">
            <el-radio :label="1">能量</el-radio>
            <el-radio :label="2">合成石</el-radio>
            <el-radio :label="3">宝箱</el-radio>
            <el-radio :label="4">积分</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item  label="获得概率" prop="probability">
          <el-input-number v-model="formData.probability" :min="0.000001" :max="999999" label="请输入获得概率"></el-input-number>
        </el-form-item>
        <el-form-item  label="材料" prop="materialId" v-if="formData.lotteryType==2">
          <el-select v-model="formData.materialId" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item  label="奖励多少" prop="rewardNum" v-if="formData.lotteryType !=2">
<!--          <el-input v-model="formData.rewardNum" placeholder="请输入奖励数量"></el-input>-->
          <el-input-number v-model="formData.rewardNum" :min="1" :max="999999" label="请输入奖励数量"></el-input-number>

        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>

import {lotteryDrawSee, lotteryDrawUpdate,lotteryDrawSave,SyntheticMaterialist} from "@/api/user/user"

export default {
  data() {
    return {
      dialogVisible: false,
      title: '编辑',
      formData: {
        lotteryName:undefined,//名称
        lotteryType:1,//1:能量，2 合成石
        materialId:undefined,//材料ID（选择合成石需要传入材料主键ID）
        probability:undefined,//获得概率
        rewardNum:1,//	奖励多少
      },
      rules: {
        rewardNum: [{
          required: true,
          message: '请输入奖励数量',
          trigger: 'blur'
        }],
        materialId: [{
          required: true,
          message: '请选择材料',
          trigger: 'blur'
        }],
        probability: [{
          required: true,
          message: '请输入获得概率',
          trigger: 'blur'
        }],
        lotteryName: [{
          required: true,
          message: '请输入奖品名称',
          trigger: 'blur'
        }],
      },
      options: [],
      id:null
    }
  },

  methods: {
    // 弹窗
    async onOpen(lotteryId) {
      this.getSyntheticMaterialist()
      if(lotteryId){
        this.id = true
        this.title="编辑"
        this.getLotteryDrawSee(lotteryId)
        // this.formData = JSON.parse(JSON.stringify(obj))
      }else{
        this.id = false
        this.title="新增"
      }
      this.dialogVisible = true
    },
    async getSyntheticMaterialist(){
      let res  = await  SyntheticMaterialist()
      this.options = res.data.map(item => {
        return {
          value:item.materialId,
          label: item.materialName,
        }
      })
    },
    async getLotteryDrawSee(id){
      let res  = await lotteryDrawSee({lotteryId:id})
      this.formData =res.data
    },
    onClose() {
      this.dialogVisible = false
      this.$refs['elForm'].resetFields()
      this.formData.lotteryName=undefined//名称
        this.formData.lotteryType=1//1:能量，2 合成石
        this.formData.materialId=undefined//材料ID（选择合成石需要传入材料主键ID）
        this.formData.probability=undefined//获得概率
        this.formData.rewardNum=1//	奖励多少

    },
    close() {
      this.dialogVisible = false
    },
    // 提交数据
    handleConfirm() {
      this.$refs['elForm'].validate(async valid => {
        this.loading = true
        if (!valid) {
          // 如果验证不通过，则阻止后续代码执行
          this.loading = false;
          return;
        }
        if (this.id) {
          try {
            // 编辑
            await lotteryDrawUpdate(this.formData)
            this.$message({
              message: '修改成功',
              type: 'success'
            });
            this.$emit('success')
            this.onClose()
            this.loading = false
          } catch (error) {
            this.loading = false
          }
        } else {
          try {
            // 新增
            await lotteryDrawSave(this.formData)
            this.$message({
              message: '新增成功',
              type: 'success'
            });
            this.$emit('success')
            this.onClose()
            this.loading = false
          } catch (error) {
            this.loading = false
          }
        }
      })
    },
  }
}

</script>
<style>
.el-upload__tip {
  line-height: 1.2;
}

</style>
